<template>
	<view class="wrap">
		 <view class="store">
			 <text class="tag" v-if="isLocation == 1">当前</text>
			 <text class="storeName">{{storeName}}</text>
		 </view>
		 <view class="address">
		 	{{storeAddress}}
		 </view>
		 
		 <view class="bottomContent">
		 	 <view class="distanceWrap">
		 	 	 <text class="distance">{{filterNull(distance)}}km</text>
				 <text class="title">距离</text>
		 	 </view>
			 
			 <view class="">
				<image @click="callPhone()" class="icon-image" :src="phoneImg" mode=""></image>
				<image @click="navi()" class="icon-image" :src="naviImg" mode=""></image>
				 
			 </view>
			 
		 </view>
	</view>
</template>

<script>
	export default {
		name: 'store-cell',
		data(){
			return {
				naviImg:this.baseImageUrl+'uni_rental/导航_icon@2x.png',
				phoneImg:this.baseImageUrl+'uni_rental/电话_icon@2x.png'
			}
		},
		props: {
			isLocation: {
				type: String | Number,
				default: 0
			},
			storeName: {
				type:String,
				default: '深圳汇天源龙岗店'
			},
			
			storeAddress: {
				type: String,
				default: '深圳市龙岗区华侨城海蓝街道1105号海蓝街道海蓝街道海 蓝街道1105号'
			},
			
			distance: {
				type: String,
				default:'1.15'
			},
			phone: {
				type: String,
				default: '18712345678'
			},
				
			longitude: {
				type: Number,
				default: 0
			},
			latitude: {
				type: Number,
				default: 0
			}
		},
		methods: {
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.phone,
					success: (res) => {
						console.log('拨打电话成功');
					}
				})
			},
			navi() {
		    uni.openLocation({ //​使用微信内置地图查看位置。
		    	latitude: this.latitude, //要去的纬度-地址
		    	longitude: this.longitude, //要去的经度-地址
		    	name: this.storeName,
		    	address: this.storeAddress,
		    	success() {
		    		console.log('成功了');
		    	},
		    	fail(msg) {
		    		console.log(msg)
		    	}
		    })
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap {
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 0px NaNpx #000000; 
	padding: 25upx;
}

.tag {
	padding: 9upx;
	color: #fff;
	font-size: 20upx;
	border-radius: 3upx;
	background-color: #12B9A3;
	margin-right: 7upx;
}

.storeName {
	font-size: 28upx;
	font-weight: bold;
	letter-spacing: 1upx;
}

.address {
	margin-top: 15upx;
	font-size: 24upx;
	color: #999;
}

.bottomContent {
	display: flex;
  justify-content: space-between;
	align-items: center;
	margin-top: 30upx;
}

.distanceWrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	.distance {
		font-size: 26upx;
		color: #333;
		font-weight: bold;
	}
	.title {
		font-size: 22upx;
		color: #999;
		margin-top: 10upx;
	}
}

.icon-image {
	width: 34upx;
	height: 34upx;
	margin-left: 70upx;
}
</style>
